<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历函数</title>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" id="btn" value="五方圣兽">
<ul>
    <li>青龙</li>
    <li>朱雀</li>
    <li>白虎</li>
    <li>玄武</li>
    <li>麒麟</li>
</ul>
</body>
<script>
    //方式一:传统方式
    /*$("#btn").click(function () {
        let lis= $("li");
        for (let i = 0; i < lis.length; i++) {
            alert(i+"；"+lis[i].innerHTML)
        }
    });*/
    //方式二；对象.each()
    /*$("#btn").click(function () {
        $("li").each(function () {
            alert(this.innerHTML);
        })
    });*/
    /*$("#btn").click(function () {
        $("li").each(function (i,ele) {
            alert(i+":"+ele.innerHTML)
        })
    })*/
    //方式三
    /*$("#btn").click(function () {
        $.each($("li"),function (i,ele) {
            alert(i+":"+ele.innerHTML)
        })
    })*/
    //方式四 for of 此方式1.8没有
    $("#btn").click(function () {
        for (ele of $("li")){
            alert(ele.innerHTML)
        }
    })
</script>
</html>